<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Аттестат - приложение</title>

    <style type="text/css">
        body {
            margin: 0;
            /* body-width */ width: 290mm;
            /* body-height */ height: 205mm;
            overflow-y: hidden;
        }

        #back {
            position: absolute;
        }

        #name,
        #date,
        #birthday,
        #director,
        #number,
        #info-and-z {
            position: absolute;
            overflow: auto;
            padding: 0px;
        }

        #date {
            /* date-left */ left: 90mm;
            /* date-bottom */ bottom: 43mm;
            /* date-height */ height: 10mm;
            text-align: center;
        }

        #number {
            /* number-right */ right: 23mm;
            /* number-top */ top: 76mm;
            /* number-height */ height: 10mm;
            /* number-width */ width: 100mm;
            text-align: center;
        }

        #birthday {
            /* birthday-right */ right: 23mm;
            /* birthday-bottom */ bottom: 53mm;
            /* birthday-height */ height: 10mm;
            /* birthday-width */ width: 100mm;
            text-align: center;
        }

        tbody {
            max-height: inherit;
            height: inherit;
            overflow-y: auto;
            display: block;
        }

        tr,
        td,
        thead,
        tbody {
            vertical-align: top;
            border-collapse: collapse;
            height: 100%;
        }

        table,
        tr,
        td {
            margin: 0px;
            padding: 0px;
            border: none;
            border-collapse: collapse;
            outline: 0;
        }

        #name {
            /* name-width */ width: 100mm;
            /* name-top */ top: 91mm;
            /* name-right */ right: 23mm;
            text-align: center;
        }

        #director {
            /* director-bottom */ bottom: 25mm;
            /* director-left */ left: 80mm;
            /* director-width */ width: 50mm;
            text-align: right;
        }

        #info-and-z {
            /* info-top */ top: 18mm;
            /* info-left */ left: 8mm;
            /* info-height */ height: 130mm;
            /* info-width */ width: 130mm;
            text-align: left;
            float: left;
            flex-direction: column;
            display: flex;
            justify-content: flex-end;
        }

        #back {
            z-index: -1;
            /* back-width */ width: 290mm;
            /* back-height */ height: 205mm;
        }

        tr:last-child {
            height: 100%;
        }

        #z {
            position: relative;
            display: inline-block;
            overflow: visible;
            margin: 0;
            height: 100%;
            background-image: url("file:///PROJECT_FOLDER_PLACEHOLDER/blancs/z.png");
            background-repeat: no-repeat;
            background-position-x: center;
            background-size: contain;
        }
    </style>
</head>

<body>

    <img id="back" src="file:///PROJECT_FOLDER_PLACEHOLDER/blancs/attachment-1.jpg">
    <table id="date">
        <tr>
            <td>DATE_PLACEHOLDER</td>
        </tr>
    </table>
    <div id="birthday">BIRTHDAY_PLACEHOLDER</div>
    <div id="name">
        NAME_PLACEHOLDER
    </div>
    <div id="number">
        NUMBER_PLACEHOLDER
    </div>
    <div id="director">
        /DIRECTOR_PLACEHOLDER/
    </div>
    <div id="info-and-z">
        INFO_PLACEHOLDER
        <div id="z">
        </div>
    </div>
</body>

</html>